<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'选择客户':'选择客户'"
    :visible="visible"
    width="660px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible" @open="setCustFocus">
    <el-form
      ref="form"
      :model="form"
      label-width="82px"
      @submit.native.prevent>
      <el-row :gutter="15" style="margin-bottom:-10px;">
        <el-col :lg="12" :md="12">
          <el-form-item label="客户信息:" prop="custcode">
            <el-input
              clearable
              ref="txtCustcode"
              v-model="where.custcode"
              @keyup.enter.native="reload"
              placeholder="输入客户编码或客户名称"/>
          </el-form-item>
        </el-col>    
        <el-col :lg="12" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              size="small"
              @click="reload">查询
            </el-button>
            <el-button @click="reset" size="small">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :selection.sync="selection"
      :toolbar="false"
      @row-click="rowClick"
      height="calc(100vh - 345px)">
    </ele-pro-table>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SpbcSelectCustomer',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    pid: Number
  },
  data() {
    return {
      // 表格数据接口
      url: '/spbc/selectcustomer',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'custcode',
          label: '客户编码',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'custname',
          label: '客户名称',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'left'
        },
        {
          prop: 'custtype',
          label: '客户类型',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'left'
        }
      ],
      // 表格搜索条件
      where: {custcode:''},
      // 表格选中数据
      selection: [],
      // 表单数据
      //form: Object.assign({}, this.pid),
      form: {},
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    data() {
      if (this.data) {
        //this.form = Object.assign({}, this.data,this.pid);
        this.isUpdate = true;
      } else {
        //this.form = {};
        this.isUpdate = false;
      }
    }
  },
  mounted() {
  },
  methods: {
    setCustFocus(){
      this.$nextTick(()=>{
        this.$refs.txtCustcode.focus();
      });
    },
    rowClick(row)
    {
      this.$refs.table.clearSelection();
      this.$refs.table.toggleRowSelection(row,true);
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 保存编辑 */
    save() {
      if(this.selection.length==0)
      {
        return;
      }
      this.updateVisible(false);
      this.$emit('done',this.selection[0].custcode,this.selection[0].custname,this.selection[0].custtype,this.selection[0].gpoarea);

    },
    reset()
    {
      this.where={};
      this.reload();
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }

  }
}
</script>

<style scoped>
.el-table--mini td {
  padding: 2px 2;
}
</style>
